<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="CesiumHeatmap" />

    <link href="/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script type="text/javascript" src="/Cesium/Cesium.js"></script>
    <script type="text/javascript" src="./CesiumHeatmap/dist/cesium-heatmap-es6.umd.js"></script>
    <title>CesiumHeatmap</title>
</head>

<body style="margin: 0;">
    <noscript>CesiumHeatmap</noscript>
    <div style="width:100%; height: 100%; position: absolute;overflow: hidden;">
        <div style="width:100%; height: 100%;" id="map">

        </div>
    </div>
    <script>
        const defaultDataValue = [10, 500]
        const defaultOpacityValue = [0, 1]
        let viewer = new Cesium.Viewer('map', {
            imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ url: "https://elevation3d.arcgis.com/arcgis/rest/services/World_Imagery/MapServer" }),
            terrainProvider: new Cesium.ArcGISTiledElevationTerrainProvider({
                url: 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer'
            }),
            infoBox: false,
            selectionIndicator: false,
            animation: false,
            timeline: false,
            baseLayerPicker: false
        })
        const _3DTileset = new Cesium.Cesium3DTileset({
            url: 'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
        })
        _3DTileset.readyPromise.then(function (argument) {
            viewer.scene.primitives.add(_3DTileset)
            //贴地显示
            const height = 40
            const cartographic = Cesium.Cartographic.fromCartesian(_3DTileset.boundingSphere.center);
            const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
            const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + height);
            const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
            _3DTileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
            // viewer.flyTo(_3DTileset)
            const mouseClickHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
            mouseClickHandler.setInputAction((e) => {
                const { position } = e
                const ray = viewer.camera.getPickRay(position);
                const cartesian3 = viewer.scene.globe.pick(ray, viewer.scene);
                const radians = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3);
                const lat = Cesium.Math.toDegrees(radians.latitude); //弧度转度
                const lng = Cesium.Math.toDegrees(radians.longitude);
                const alt = radians.height;
                console.log(`longitude:${lng},latitude:${lat},height:${alt}`);
            }, ScreenSpaceEventType.LEFT_CLICK)
        })

        const points = []
        fetch("/datas/geojson/busstop2016.geojson", {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        }).then((response) => {
            response.json().then((data) => {
                if (data)
                    data.features.forEach(function (feature) {
                        const lon = feature.geometry.coordinates[0]
                        const lat = feature.geometry.coordinates[1]
                        points.push({
                            x: lon - 0.05,
                            y: lat - 0.04,
                            value: 100 * Math.random()
                        })
                    })
                const earthHeatMap = new CesiumHeatmap(viewer,
                    {
                        zoomToLayer: true,
                        points,
                        heatmapDataOptions: { max: defaultDataValue[1], min: defaultDataValue[0] },
                        heatmapOptions: {
                            maxOpacity: defaultOpacityValue[1],
                            minOpacity: defaultOpacityValue[0]
                        }
                    }
                )
            })
        })
    </script>
</body>

</html>